<template>
  <div id="div-1" class="bg-gray-100">
    <div class="mx-[10%]" id="content">
      <a-flex id="a-flex-2" class="bg-white flex flex-row">
        <a-flex id="a-flex-2-flex1" flex="1" :vertical="true">
          <a-typography-paragraph class="!m-0" id="a-flex2-fle1-atp1">
            <a-typography-title href="#" :level="5" class="p-2 bg-gray-600 !text-white text-center" id="a-flex-2-flex1-att">电子电气产品</a-typography-title>
            <a-typography-paragraph :id="`a-flex1-f${index}`" class="px-4" :key="index" v-for="(item, index) in list1">
              <a-image :src="item.img" :id="`a-flex-left-img${index}`"></a-image>
              <a-typography-link class="!text-black ml-2" :id="`flex1-att${index}`">{{ item.title }}</a-typography-link>
            </a-typography-paragraph>
          </a-typography-paragraph>
        </a-flex>
        <a-flex id="a-flex-2-flex2" flex="2">
          <a-image :src='image' height="100%" width="100%" :preview="false" id="image"></a-image>
        </a-flex>
        <a-flex id="a-flex-2-flex3" flex="1" :vertical="true">
          <a-flex id="user" align="center" class="p-4">
            <a-avatar id="user-img" :src="userImg" :size="64"></a-avatar>
            <a-typography-paragraph id="user-info" class="ml-2 !mb-0">
              <a-typography-paragraph id="user-welcome" class="text-gray-400 !mb-0">Hi，欢迎来到怡合达</a-typography-paragraph>
              <a-typography-paragraph id="user-control" class="!mb-0">
                <a-typography-link id="user-login" class="!text-black text-lg">登录</a-typography-link>
                <a-typography-link id="user-reg" class="!text-black text-lg ml-2">注册</a-typography-link>
              </a-typography-paragraph>
            </a-typography-paragraph>
          </a-flex>
          <a-typography-paragraph class="mx-4 py-4 px-2 bg-orange-200	rounded-md" id="flex-r-atp">
            <a-typography-title :level="5" id="flex3-att1" class="!text-orange-600">支持型号替换</a-typography-title>
            <a-flex id="flex-r-f" align="center">
              <a-typography-link id="import" class="!text-gray-500 !underline" href="#">Excel批量导入</a-typography-link>
              <a-divider id="divider" type="vertical"></a-divider>
              <a-typography-link id="copy" class="!text-gray-500 !underline" href="#">文本复制粘贴</a-typography-link>
            </a-flex>
            <a-typography-link id="btn" href="#" class="!text-white bg-orange-600 font-bold mt-2 py-2 w-full block text-center rounded-full">快速报价</a-typography-link>
          </a-typography-paragraph>
          <a-flex id="manager-btn" class="pb-2 mt-2 gap-2 grid grid-cols-2 border-b-1 border-l-0 border-r-0 border-t-0 border-dashed	border-slate-400">
            <a-typography-link id="price-manager" class="flex-1 text-center" href="#">
              <a-image id="price-manager-img" :src="priceImg" :preview="false"></a-image>
              <a-typography-text id="price-text" class="block mt-2">报价单管理</a-typography-text>
            </a-typography-link>
            <a-typography-link id="order-manager" class="flex-1 text-center" href="#">
              <a-image id="order-manager-img" :src="orderImg" :preview="false"></a-image>
              <a-typography-text id="order-text" class="block mt-2">订单管理</a-typography-text>
            </a-typography-link>
          </a-flex>
          <a-flex id="manager-btns" class="py-4 mt-2 gap-2 grid grid-cols-2 border-b-1 border-l-0 border-r-0 border-t-0 border-dashed	border-slate-400">
            <a-typography-link id="diy-manager" class="flex-1 text-center" href="#">
              <a-image id="diy-manager-img" :src="diyImg" :preview="false"></a-image>
              <a-typography-text id="diy-text1" class="block mt-2">铝型材DIY插件</a-typography-text>
              <a-typography-text id="diy-text2" class="block text-gray-400 text-sm">助力设计</a-typography-text>
            </a-typography-link>
            <a-typography-link id="3d-manager" class="flex-1 text-center" href="#">
              <a-image id="3d-manager-img" :src="tdImg" :preview="false"></a-image>
              <a-typography-text id="3d-text1" class="block mt-2">设计插件/3D模型</a-typography-text>
              <a-typography-text id="3d-text2" class="block text-gray-400 text-sm">立即下载</a-typography-text>
            </a-typography-link>
            <a-typography-link id="mulu-manager" class="flex-1 text-center" href="#">
              <a-image id="mulu-manager-img" :src="muluImg" :preview="false"></a-image>
              <a-typography-text id="mulu-text1" class="block mt-2">目录书申请</a-typography-text>
              <a-typography-text id="mulu-text2" class="block text-gray-400 text-sm">纸质/电子档</a-typography-text>
            </a-typography-link>
            <a-typography-link id="yp-manager" class="flex-1 text-center" href="#">
              <a-image id="yp-manager-img" :src="ypImg" :preview="false"></a-image>
              <a-typography-text id="yp-text1" class="block mt-2">样品申请</a-typography-text>
              <a-typography-text id="yp-text2" class="block text-gray-400 text-sm">品质体验</a-typography-text>
            </a-typography-link>
          </a-flex>
          <a-flex id="notice" :vertical="true" class="p-4">
            <a-flex id="notice-box" justify="space-between" align="center" class="mb-2">
              <a-typography-title id="notice-title" :level="5" class="!m-0">
                <NotificationOutlined id="notice-icon" class="mr-2 text-blue-700"/>商城公告
              </a-typography-title>
              <a-typography-link id="notice-more" href="#" class="!text-gray-400">
                更多<RightOutlined id="notice-more-icon"/>
              </a-typography-link>
            </a-flex>
            <a-flex align="center" class="mt-2" :id="`notice-content${index}`" v-for="(item, index) in notices" :key="index">
              <a-typography-text :id="`notice-icon-${index}`" class="w-2 h-2 inline-block bg-gray-400 rounded-full mr-2"></a-typography-text>
              <a-typography-link :id="`notice-atp-${index}`" :ellipsis="true" class="!m-0 !max-w-[240px] !text-gray-400">{{item}}</a-typography-link>
            </a-flex>
          </a-flex>
        </a-flex>
      </a-flex>
      <a-flex class="mt-2 gap-1 grid-cols-3 justify-end" id="middle">
       <a-typography-link id="middle-link1" class="bg-orange-600 flex-1 p-6">
          <a-typography-paragraph id="link1-atp1" class="text-white text-2xl !m-0 italic font-bold">品牌促销</a-typography-paragraph>
          <a-typography-paragraph id="link1-atp2" class="text-white">聚惠让利</a-typography-paragraph>
       </a-typography-link>
       <a-typography-link id="middle-link2" class="bg-gray-600 flex-1 p-6 flex flex-col justify-end	">
          <a-typography-paragraph id="link2-atp1" class="text-white text-lg !m-0 font-bold">在线3D模型图库，快速查询电子产品</a-typography-paragraph>
          <a-typography-paragraph id="link2-atp2" class="text-white !m-0">现成各种零件模型选择</a-typography-paragraph>
       </a-typography-link>
       <a-typography-link id="middle-link3" class="bg-gray-200 flex-1 p-6">
          <a-typography-paragraph id="link3-atp1" class="font-bold !m-0">电子书阅读器</a-typography-paragraph>
          <a-typography-paragraph id="link3-atp2" class="font-bold !m-0">离线使用</a-typography-paragraph>
          <a-typography-paragraph id="link3-atp3" class="font-bold !m-0">快速查找</a-typography-paragraph>
          <a-typography-paragraph id="link3-atp4" class="!m-0">助力工程师选型</a-typography-paragraph>
       </a-typography-link>
      </a-flex>
      <a-flex :vertical="true" id="content" class="mt-2">
        <a-flex id="content-title" justify="space-between" align="center">
          <a-typography-title id="content-title" :level="4" class="!m-0">
            <SketchOutlined id="content-icon" class="mr-2 text-blue-700"/>优选品牌
          </a-typography-title>
          <a-typography-link id="content-more" href="#" >
            更多<RightOutlined id="content-more-icon"/>
          </a-typography-link>
        </a-flex>
      </a-flex>
      <a-flex class="mt-2 gap-1" id="switch">
       <a-typography-link :id="`switch-link${index}`" v-for="(item, index) in switchs" :key="index">
        <a-image :preview="false" :src="item" :id="`switch-img-${index}`"></a-image>
       </a-typography-link>
      </a-flex>
      <a-flex id="content-box" class="bg-blue-800 p-6 gap-8 mt-1" align="center">
        <a-flex id="content-left" class="basis-1/5 text-center -rotate-90 jusutify-center align-center">
          <a-divider id="content-l-text" orientation="right" class="!border-white border-2 !text-white !text-sm" orientation-margin="30px">COOPERATIVE BRAND</a-divider>
        </a-flex>
        <a-flex class="basis-2/5" :vertical="true" id="content-m">
          <a-flex align="center" id="content-m-f1">
            <a-typography-paragraph class="text-center" id="content-atp1">
              <a-typography-title id="content-atp1-att1" class="!text-white !m-0" >CHNT</a-typography-title>
              <a-typography-title id="content-atp1-att2" class="!text-white !m-0 !-m-2" :level="5">正泰</a-typography-title>
            </a-typography-paragraph>
            <a-typography-paragraph class="ml-6" id="content-atp2">
              <a-typography-text id="content-atp2-att1" class="!text-white">断路器</a-typography-text>
              <a-divider id="content-ad1" type="vertical" class="bg-white"></a-divider>
              <a-typography-text id="content-atp2-att2" class="!text-white">继电器</a-typography-text>
              <a-divider id="content-ad2" type="vertical" class="bg-white"></a-divider>
              <a-typography-text id="content-atp2-att3" class="!text-white">按钮</a-typography-text>
            </a-typography-paragraph>
          </a-flex>
          <a-typography-link id="content-m-more" class="bg-blue-900 my-6 text-center !text-white p-1 rounded-2xl max-w-[72px] font-bold">More <RightOutlined id="content-m-icon" class="text-sm"/></a-typography-link>
          <a-typography-paragraph class="text-white !m-0 text-sm indent-6	" id="content-atp3">
            正泰集团股份有限公司，创建于1984年，是智慧能源解决方案提供商，集团积极布局智能电气、绿色能源、工控与自动化、智能家居以及孵化器等“4+1”产业板块，形成了集“发电、储电、输电、变电、配电、售电、用电”为一体的全产业链优势。
          </a-typography-paragraph>
        </a-flex>
        <a-image class="basis-2/5" height="100%" :preview="false" :src="contentImg" id="content-img"></a-image>
      </a-flex>
      <a-flex class="mt-4" id="f-b-box">
        <a-flex class="basis-1/5 bg-orange-600" :vertical="true" id="f-b-item">
          <a-typography-title id="f-b-title" :level="4" class="!text-white px-6 pt-6">热销产品</a-typography-title>
          <a-flex class="grid-cols-2 grid gap-2 px-6" id="f-b-detail">
            <a-typography-text id="f-b-att1" class="bg-gray-600 text-white text-center rounded-md">工业控制</a-typography-text>
            <a-typography-text id="f-b-att2" class="bg-gray-600 text-white text-center rounded-md">中低压配电</a-typography-text>
            <a-typography-text id="f-b-att3" class="bg-gray-600 text-white text-center rounded-md">视觉传感</a-typography-text>
            <a-typography-text id="f-b-att4" class="bg-gray-600 text-white text-center rounded-md">马达驱动</a-typography-text>
          </a-flex>
          <a-image id="f-b-img" :preview="false" :src="hotImg" class="mt-4"></a-image>
        </a-flex>
      </a-flex>
       <a-flex :vertical="true" id="recommend" class="mt-2">
        <a-typography-title id="recommend-title" :level="4" class="!m-0">
          <PropertySafetyOutlined id="recommend-icon" class="mr-2 text-orange-600"/>精选推荐
        </a-typography-title>
      </a-flex>
    </div>
  </div>
</template>

<script setup>
const userImg = 'https://picsum.photos/id/4/80/80';
const orderImg = 'https://picsum.photos/id/5/40/40';
const priceImg = 'https://picsum.photos/id/6/40/40';
const diyImg = 'https://picsum.photos/id/7/40/40';
const tdImg = 'https://picsum.photos/id/8/40/40';
const muluImg = 'https://picsum.photos/id/9/40/40';
const ypImg = 'https://picsum.photos/id/10/40/40';
const contentImg = 'https://picsum.photos/id/11/360/200'
const hotImg = 'https://picsum.photos/id/12/280/230'
const switchs = ['https://picsum.photos/id/14/245/118', 'https://picsum.photos/id/15/245/118','https://picsum.photos/id/16/245/118','https://picsum.photos/id/17/245/118', 'https://picsum.photos/id/18/245/118','https://picsum.photos/id/19/245/118'];
const notices = ['关于2024年国庆节放假关于2024年国庆节放假关于2024年国庆节放假', '关于2024年中秋节放假']
const list1 = [
  {img: 'https://picsum.photos/id/0/40/40', title: '工业控制-马达驱动'},
  {img: 'https://picsum.photos/id/1/40/40', title: '传感器-工业视觉'},
  {img: 'https://picsum.photos/id/2/40/40', title: '低压电气'},
  {img: 'https://picsum.photos/id/3/40/40', title: '电气辅材'}
]
const list2 = ['七年级', '八年级', '九年级', '高一', '高二', '高三']
const image = "https://picsum.photos/id/7/1080/300";
const versionList = ['人教版', '苏教版', '北师大版', '粤教版', '语文版', '西师大版']
const list3 = ['人教版','部编版','苏教版','北师大版','沪教版','鲁教版','湘教版','鄂教版','语文版','河大版','西师大版','鲁人版','冀教版','粤教版']
const list4 = ['部编版一年级语文上册','部编版一年级语文下册','部编版二年级语文上册','部编版二年级语文下册','部编版三年级语文上册','部编版三年级语文下册','部编版四年级语文上册','部编版四年级语文下册','部编版五年级语文上册','部编版五年级语文下册','部编版六年级语文上册','部编版六年级语文下册']
</script>
<style></style>
